<template>
    <div class="role-wrapper">
        <el-dialog title="内容详情" :visible.sync="dialogVis" :close-on-click-modal="false" width="600px" center @close="cancelClick">
            <div class="detail-page">
                <div class="detail-wrap">
                    <div class="top t-eight marg-B2">
                        编号：{{itemData.clue_id}}
                    </div>
                    <div class="case-list">
                        <div class="flex f-be">
                            <div class="fw-7 t-three fs-18">
                                {{itemData.category_title}}
                            </div>
                        </div>
                        <div class="t-three marg-B2 marg-T1 fs-14">
                            {{itemData.content}}
                        </div>
                        <div class="t-eight marg-B1 flex">
                            <div class="t-three fs-14">
                                {{itemData.location}}
                            </div>
                            <div class="marg-L1">
                                <img class="phone-icon" src="../assets/images/phone-icon.png"/>
                                <span class="fs-16 t-two marg-Lhalf">{{itemData.phone}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex f-be f-mi">
                    <div class="flex">
                        <div class="marg-R1">
                            <span class="t-three fs-14">抢单：</span>
                            <span class="t-two fs-14">{{itemData.money_team}}</span>
                            <span class="t-two fs-12">分</span>
                        </div>
                        <div>
                            <span class="t-three fs-14">独享：</span>
                            <span class="t-zero fs-14">{{itemData.money_alone}}</span>
                            <span class="t-zero fs-12">分</span>
                        </div>
                    </div>
                    <div class="btn-box">
                        <el-button v-if="itemData.is_buy_someone == 1 && itemData.shop_is_buy == 0" class="gr-btn btn" type="text" size="small" @click="grabOrders('order')">已抢</el-button>
                        <button v-if="itemData.is_buy_someone == 0 && itemData.shop_is_buy == 0" class="btn b-bg marg-R1" @click="grabOrders('order')">抢单</button>
                        <button v-if="itemData.is_buy_someone == 0" class="btn l-bg" @click="exclusive('share')">独享</button>
                    </div>
                </div>                
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {request} from "../assets/js/utils/request";
export default {
    props: ['isDetail','itemData'],
    data() {
        return {
            dialogVis: false,
        }
    },
    methods: {
        cancelClick() {
            this.dialogVis = false
            this.$emit('detailClose')
        },
        handleCheckedSure() {
            const formData = new FormData();
            formData.append(
                {
                    clue_id: this.dataInfo.clue_id,
                    type: this.dataType === 'grab' ? '1' : '2'
                }
            );
            request({
                url: '/user/clue/buy',
                method: 'POST'
            },formData).then(res => {
                if(res.code == 200) {
                    this.$message({
                        message: '抢单成功',
                        type: 'success'
                    });
                    this.dialogVis = false
                    this.$emit('detailSave')
                } else{
					this.$message({
					    message: res.message,
					    type: 'error'
					});
				}
            }).catch((error) => {
                
            })
        },
    },
    watch: {
        isDetail(newVal, oldVal) {
            this.dialogVis = newVal
            // this.detail = this.dataInfo
        }
    }
}
</script>
<style lang="less" scoped>
    /deep/.el-dialog{
        border-radius: 15px;
    }
    .detail-page{
		.detail-wrap{
			padding: 30rpx;
			border-radius: 8px;
			background: rgba(255, 255, 255, 1);
			.top{
				padding-bottom: 30rpx;
				border-bottom: 2rpx solid #E5E5E5;
			}
			.middle{
				padding: 30rpx 0;
				border-bottom: 2rpx solid #E5E5E5;
			}
			.case-list{
				.items{
					// padding: 32rpx;
					// border: 2rpx solid #E5E5E5;
					// border-radius: 16rpx;
					.bot-t{
						padding-top: 20rpx;
						border-top: 2rpx solid #E5E5E5;
						.right{
							// flex: 1;
							display: flex;
						}
					}
					.phone-icon{
						width: 26rpx;
					}
				}
			}
		}
		.btn-box{
            text-align: right;
			// width: 100%;
			// height: 160rpx;
			// background: rgba(255, 255, 255, 1);
			// box-shadow: 0px -1px 4px  rgba(0, 0, 0, 0.2);
			// display: flex;
			// align-items: center;
			.btn{
				font-size: 14px;
                padding: 0;
				color: #fff;
				width: 96px;
                height: 28px;
				text-align: center;
				line-height: 28px;
                border: none;
				border-radius: 25px;
			}
			.b-bg{
				background: #2967E3;
			}
			.l-bg{
				background: #00BAAD;
			}
            .gray{
                background: #A6A6A6;
            }
            .gr-btn{
                color: #333;
                background: #F5F6FA;
            }
		}
	}
</style>